{% extends 'base.html' %}

{% block title %}首页 - Will's Blog{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="hero-section mb-5">
    <div class="text-center py-5">
        <h1 class="display-4 gradient-text fw-bold mb-3">欢迎来到 Will's Blog</h1>
        <p class="lead text-secondary">分享技术、记录生活、探索未知</p>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="gradient-text fw-bold mb-0">最新文章</h2>
            <span class="badge bg-primary">{{ posts.total }} 篇</span>
        </div>

        {% if posts.items %}
            {% for post in posts.items %}
                <article class="card post-card mb-4 hover-lift">
                    {% if post.featured_image %}
                        <div class="position-relative overflow-hidden" style="height: 250px;">
                            <img src="{{ post.featured_image }}"
                                 class="card-img-top w-100 h-100"
                                 style="object-fit: cover;"
                                 alt="{{ post.title }}">
                            <div class="position-absolute top-0 start-0 w-100 h-100"
                                 style="background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);"></div>
                        </div>
                    {% endif %}
                    <div class="card-body">
                        <h2 class="card-title h3 mb-3">
                            <a href="{{ url_for('main.post', slug=post.slug) }}"
                               class="text-decoration-none text-dark">
                                {{ post.title }}
                            </a>
                        </h2>

                        <div class="post-meta mb-3">
                            <span class="me-3">
                                <i class="bi bi-person-circle"></i> {{ post.author.username }}
                            </span>
                            <span class="me-3">
                                <i class="bi bi-calendar-event"></i> {{ post.created.strftime('%Y-%m-%d') }}
                            </span>
                            <span>
                                <i class="bi bi-eye"></i> {{ post.views }} 阅读
                            </span>
                        </div>

                        <p class="card-text text-secondary mb-4">{{ post.summary }}</p>

                        <a href="{{ url_for('main.post', slug=post.slug) }}"
                           class="btn btn-primary">
                            阅读全文 <i class="bi bi-arrow-right ms-2"></i>
                        </a>
                    </div>
                    {% if post.tags %}
                        <div class="card-footer">
                            <div class="tags-cloud">
                                <i class="bi bi-tags text-primary me-2"></i>
                                {% for tag in post.tags %}
                                    <a href="{{ url_for('main.tag', slug=tag.slug) }}"
                                       class="badge text-decoration-none">
                                        {{ tag.name }}
                                    </a>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                </article>
            {% endfor %}

            <!-- 分页 -->
            {% if posts.pages > 1 %}
                <nav aria-label="文章分页" class="mt-5">
                    <ul class="pagination justify-content-center">
                        {% if posts.has_prev %}
                            <li class="page-item">
                                <a class="page-link"
                                   href="{{ url_for('main.index', page=posts.prev_num) }}"
                                   aria-label="上一页">
                                    <i class="bi bi-chevron-left"></i> 上一页
                                </a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">
                                    <i class="bi bi-chevron-left"></i> 上一页
                                </span>
                            </li>
                        {% endif %}

                        {% for page in range(1, posts.pages + 1) %}
                            {% if page == posts.page %}
                                <li class="page-item active" aria-current="page">
                                    <span class="page-link">{{ page }}</span>
                                </li>
                            {% else %}
                                <li class="page-item">
                                    <a class="page-link"
                                       href="{{ url_for('main.index', page=page) }}">
                                        {{ page }}
                                    </a>
                                </li>
                            {% endif %}
                        {% endfor %}

                        {% if posts.has_next %}
                            <li class="page-item">
                                <a class="page-link"
                                   href="{{ url_for('main.index', page=posts.next_num) }}"
                                   aria-label="下一页">
                                    下一页 <i class="bi bi-chevron-right"></i>
                                </a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">
                                    下一页 <i class="bi bi-chevron-right"></i>
                                </span>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        {% else %}
            <div class="alert alert-info border-0">
                <div class="text-center py-5">
                    <i class="bi bi-inbox display-1 text-primary mb-3"></i>
                    <h4>暂无文章</h4>
                    <p class="text-muted">博主正在努力创作中，敬请期待！</p>
                </div>
            </div>
        {% endif %}
    </div>

    <div class="col-md-4">
        <!-- 关于博客卡片 -->
        <div class="card mb-4 glass-card hover-lift">
            <div class="card-header">
                <i class="bi bi-info-circle me-2"></i>关于博客
            </div>
            <div class="card-body">
                <p class="text-secondary">欢迎来到我的个人博客，这里记录了我的学习、思考和生活。</p>
                <a href="{{ url_for('main.about') }}" class="btn btn-outline-primary w-100">
                    <i class="bi bi-arrow-right-circle me-2"></i>了解更多
                </a>
            </div>
        </div>

        <!-- 快速导航卡片 -->
        <div class="card mb-4 glass-card hover-lift">
            <div class="card-header">
                <i class="bi bi-compass me-2"></i>快速导航
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ url_for('music.index') }}" class="btn btn-outline-primary">
                        <i class="bi bi-music-note-beamed me-2"></i>音乐欣赏
                    </a>
                    <a href="{{ url_for('main.contact') }}" class="btn btn-outline-primary">
                        <i class="bi bi-envelope me-2"></i>联系我
                    </a>
                </div>
            </div>
        </div>

        <!-- 统计信息卡片 -->
        <div class="card glass-card">
            <div class="card-header">
                <i class="bi bi-bar-chart me-2"></i>博客统计
            </div>
            <div class="card-body">
                <div class="row text-center g-3">
                    <div class="col-6">
                        <div class="stat-item">
                            <h3 class="mb-0">{{ posts.total }}</h3>
                            <p class="mb-0">文章</p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stat-item">
                            <h3 class="mb-0">{{ posts.total * 150 }}</h3>
                            <p class="mb-0">阅读</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.hero-section {
    position: relative;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1), transparent);
    border-radius: 50%;
    z-index: -1;
}
</style>
{% endblock %}